<template>
	<view>
		<view class="header">
			<text>定期理财</text>
			<text class="text-1">超过500,000+人购买</text>
		</view>

		<view class="header-2">
			<text>甄选金融机构优质产品，收益稳健、期限丰富。可挑选多款不同期限的产品，省心投资，安心持有。</text>
		</view>

		<view class="header-3">
			<view class="title">
				<text> 券商资管 | 天天风泽76天</text>
			</view>

			<view class="right-top">
				明星产品
			</view>

			<view class="card-mid">
				<view class="left-1">
					<view class="left-1-1">
						<text>4.05%</text>
					</view>
					<text class="left-1-2">业绩比较基准</text>
				</view>
				<view class="left-2">
					<view class="left-2-1">
						<text>76天</text>
					</view>
					<text class="left-2-2">5000元起购</text>
				</view>
				<view class="left-3">
					<view class="goBuy">
						<image class="image-1" src="../../static/19374@2x.png" mode="1"></image><text>去抢购</text>
					</view>
				</view>
			</view>

			<view class="card-small">
				<view class="small-yellow">
					<text>限时抢购</text>
				</view>
				<view class="small-yellow">
					<text>无需开户</text>
				</view>
			</view>
		</view>

		<view class="header-title">
			<view @click="changeChoose(index)" :class="[choose==index?'choose-title':'','view-title']"
				v-for="(item,index) in titles" :key="index">
				<text>{{item}}</text>
			</view>
		</view>

		<view class="section">
			<view  v-for="(item,index) in cards" :key="item._id" :mark:fid="item.fid"  @click="toDetail" class="header-3 card">
				<view class="title card-title">
					<text>{{item.typeName}} | {{item.fname}}</text>
					<view v-for="(i,m) in item.purchasingArray" class="small-yellow title-right" :key="m">
						<text>{{i}}</text>
					</view>
				</view>

				<view class="card-mid card-small">
					<view class="left-1">
						<view class="left-1-1"><text>{{Math.floor(item.yieldRates *10000)/100}}%</text>
						</view>
						<text class="left-1-2">{{item.investmentScope}}</text>
					</view>
					<view class="left-2">
						<view class="left-2-1"><text>{{item.period}}天</text>
						</view>
						<text class="left-2-2">建议{{item.wealthDeadline}} | {{item.minimumMoney}}元起购</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<text>没有找到合适的产品？去逛逛基金吧！</text>
		</view>







	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: ['全部', '60天内', '60天-1年', '1年以上'],
				choose: 0,
				cards: [{
					_id: 0,
					name: '券商资管 | 齐鲁锦泉28天',
					percent: '3.05%',
					des: '业绩比较基准',
					days: '28天',
					from: '券商出品 | 低风险',
					types: [
						'限时抢购',
					]
				}, {
					_id: 0,
					name: '券商资管 | 天风天泽76天',
					percent: '4.05%',
					des: '业绩比较基准',
					days: '78天',
					from: '券商出品 | 中低风险',
					types: [
						'限时抢购',
						'无需开户'
					]
				}]
			}
		},
		onLoad() {
			this.getRegular();
		},
		methods: {
			changeChoose(index) {
				this.choose = index
			},
			toDetail(e) {
				console.log(e)
				uni.navigateTo({
					url: './detail?id='+e.mark.fid
				})
			},
			async getRegular() {
				const res = await this.$http.regular.getRegular();
				console.log(res);
				this.cards = res.data.list
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		height: 44rpx;
		position: relative;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 30rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #333333;
		width: 702rpx;

		.text-1 {
			font-size: 24rpx;
			position: absolute;
			right: 0;
			font-weight: normal;
		}
	}

	.header-2 {
		margin: 24rpx;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 44rpx;
	}

	.header-3 {
		margin: 24rpx;
		margin-top: 14rpx;
		margin-right: 24rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
		position: relative;
		box-shadow: 0rpx 0rpx 30rpx 0rpx #eee;
		border-radius: 10rpx;



		.right-top {
			position: absolute;
			right: 0;
			top: 0;
			width: 134rpx;
			height: 44rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			line-height: 44rpx;
			background-color: #f85656;
			text-align: center;
			border-radius: 0rpx 10rpx 0rpx 10rpx;
		}



		.card-small {
			margin-top: 22rpx;
			display: flex;




		}
	}

	.header-title {
		margin-top: 44rpx;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 28rpx;
		display: flex;
		margin-left: 24rpx;

		.view-title {
			margin: 0;
			padding: 0;
			text-align: center;
			height: 52rpx;
			color: #666666;
			border-radius: 8rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;

			&:not(:first-child) {
				margin-left: 12rpx;
			}
		}

		.choose-title {
			background-color: #3476f1;
			color: #FFFFFF;
		}
	}


	.title {
		font-weight: bold;
		font-size: 28rpx;
		position: relative;

	}

	.card-title {
		display: flex;
		line-height: 28rpx;

		.title-right {}
	}

	.card-mid {
		display: flex;
		margin-top: 30rpx;
		position: relative;

		.left-1 {
			height: 80rpx;

			.left-1-1 {
				margin-bottom: 12rpx;
				font-size: 40rpx;
				color: #f85656;
				font-weight: bold;
			}

			.left-1-2 {
				font-weight: normal;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.left-2 {
			margin-left: 60rpx;

			.left-2-1 {
				margin-bottom: 16rpx;
				margin-top: 12rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.left-2-2 {
				font-size: 24rpx;
				font-weight: normal;
				color: #999999;
			}
		}

		.left-3 {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 160rpx;
			height: 70rpx;
			background-color: #3476f1;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			border-radius: 35rpx;
			font-size: 24rpx;

			.goBuy {
				height: 70rpx;
				width: 160rpx;
			}

			.image-1 {
				width: 22rpx;
				height: 24rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}

	}

	.small-yellow {
		color: #d1a563;
		height: 32rpx;
		width: 100rpx;
		background-color: #f9f2e8;
		text-align: center;
		font-size: 20rpx;
		line-height: 32rpx;

		&:not(:first-child) {
			margin-left: 20rpx;
		}
	}

	.card-small {
		padding-bottom: 28rpx;
	}

	.section {
		box-shadow: 0rpx 0rpx 30rpx 0rpx #eee;
		margin: 24rpx;
		border-radius: 10rpx;

		.card {
			box-shadow: none;

			&:not(:first-child) {
				margin-top: -24rpx;
				border-top: 4rpx solid #fbfbfb;
			}
		}
	}

	.bottom {
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
</style>
